import { FC } from 'react'
import { Typography } from 'antd'
import { nanoid } from 'nanoid'
import { useDispatch } from 'react-redux'
import { ComponentcofGroup, ComponentType } from '@/components/questionComponents'
import styles from './ComponentLib.module.scss'
import { addComponent } from '@/store/componentsReducer'
const { Title } = Typography
const GenComponent = (component: ComponentType) => {
  const { Component, type, title } = component
  const dispatch = useDispatch()
  const handelAdd = () => {
    dispatch(
      addComponent({
        fe_id: nanoid(),
        title,
        type,
      })
    )
  }
  return (
    <div className={styles.wrapper} onClick={handelAdd} key={type}>
      <div className={styles.component}>
        <Component />
      </div>
    </div>
  )
}
const Lib: FC = () => {
  return (
    <>
      {ComponentcofGroup.map((group, index) => {
        return (
          <div key={group.id}>
            <Title
              level={3}
              style={{
                fontSize: '16px',
                marginTop: index > 0 ? '20px' : '0px',
              }}>
              {group.groupName}
            </Title>
            {group.components.map(component => GenComponent(component))}
          </div>
        )
      })}
    </>
  )
}
export default Lib
